<script setup lang="ts">
import { getCurrentInstance, ref, onMounted } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const isNumber = /^\d+(\.{0,2}\d+){0,2}$/
// ----
const items = ref([{
  id: 0,
  text: '业绩佣金提成系数',
  value: '',
  tabName: 'proportion_one'
}, {
  id: 0,
  text: '团队奖金提成系数',
  value: '',
  tabName: 'proportion_two'
}, {
  id: 0,
  text: '代理佣金提成系数',
  value: '',
  tabName: 'proportion_agent'
}])

/* ---- */
const layer = ref()
const layerLoading = ref()

/* ---- */
const getFormInfo = () => {
  items.value.forEach((item) => {
    const newItems = forSys.filter((curItem) => { return String(curItem.name) === item.tabName })
    if (Number(newItems.length) === 1) {
      item.id = newItems[0].id
      item.value = Math.round(Number(newItems[0].value) * 100)
    }
  })
}
// ----
const emptyInfo = (event) => {
  const curEL = event.currentTarget
  const input = curEL.parentElement.querySelector('input')
  input.value = ''
  input.dispatchEvent(new Event('input'))
}
// ----
const checkLimit = (event, reg, info) => {
  const curEL = event.currentTarget
  if (Number(curEL.value.length) === 0) return false
  if (!reg.test(curEL.value)) {
    if (info) proxy.$Myfun.forToast(layer.value, 'open', info)
    // ----
    curEL.value = ''
    curEL.dispatchEvent(new Event('input'))
  }
}
// ----
const subform = async () => {
  for (let i = 0; i < Number(items.value.length); i++) {
    const item = items.value[i]
    if (Number(item.value.length) === 0) {
      proxy.$Myfun.forToast(layer.value, 'open', '请填写' + item.text + '！')
      return false
    }
  }
  // ----
  let resData = 0
  let forValue = ''
  let forType = ''
  let forUrl = ''
  let forData = {}
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  // ----
  for (let i = 0; i < Number(items.value.length); i++) {
    const item = items.value[i]
    // ----
    forValue = Math.floor(item.value) / 100
    // ----
    forType = 'post'
    forUrl = 'system/create'
    forData = {
      name: item.tabName,
      value: forValue,
      // ----
      config_id: userInfo.config_id,
      openid: userInfo.openid
    }
    if (Number(item.id) > 0) {
      forType = 'patch'
      forUrl = 'system/update?id=' + item.id
      forData = {
        value: forValue,
        // ----
        config_id: userInfo.config_id,
        openid: userInfo.openid
      }
    }
    // ----
    await proxy.$http[forType](forUrl, forData).then((res) => { if (res) resData++  }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  }
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
  if (Number(resData) === Number(items.value.length)) proxy.$router.back()
}
const goback = () => { proxy.$router.back() }

/* ---- */
onMounted(() => {
  getFormInfo()
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="formSet">
      <ul>
        <li v-for="(item, index) in items">
          <div class="form-txt xw-radius-3 xw-flex xw-flex-align">
            <i>{{item.text}}</i>
            <p class="xw-flex-W1"><input class="text" type="text" placeholder="" v-model.trim="item.value" @blur="checkLimit($event, isNumber, '请输入非负数')"/></p>
            <span>%</span>
            <transition name="fade"><em class="fa fa-times-circle" @click="emptyInfo" v-if="item.value"></em></transition>
          </div>
        </li>
      </ul>
      <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">确定提交</div>
      <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
    </div>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>
